<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>MVC is Fun</title>

    <style type="text/css">
      #map-canvas {
        height: 500px;
      }
	  #map-canvas2 {
        height: 500px;
      }
    </style>

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:''}]}"></script>
	<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript">
		function init() {
			var geocoder = new google.maps.Geocoder();
			var mapDiv = document.getElementById('map-canvas');
			var myMap = new google.maps.Map(mapDiv, {
				  center: new google.maps.LatLng(15.120011, 108.808937),
				  zoom: 10,
				  mapTypeId: google.maps.MapTypeId.ROADMAP
				});
			
			if ( navigator.geolocation)
			{
				navigator.geolocation.getCurrentPosition( function(pos)
				{
					var marker = new google.maps.Marker({
						map: myMap,
						position: new google.maps.LatLng(pos.coords.latitude,pos.coords.lontitude)
					});
					myMap.setCenter(marker.getPosition());
				});
			}
		}
		google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <form>
	<div id="map-canvas"></div>
	<input type="button" name="changeRadius" id = "changeRadiusButton" value="Change Radius">
	<input type="button" name="gotoVNButton" id = "gotoVNButton" value="Go to VietNam">
	</form>
  </body>
</html>